<template>
    <div class="boxContentCss">
        <div >
            <el-form ref="formRef" :model="rentParkform" label-position="right" label-width="auto">
                <EdCreateCard title="租赁信息">
                    <div class="zh_flex">
                        <div class="left">
                            <el-row class="width-100">
                                <el-col :span="8">
                                    <el-form-item class="width-m25" label="状态:" prop="parkingStatus" :rules="$validate.validates({required:true,msg:'不能为空'})">
                                        <EdSelect v-model="rentParkform.parkingStatus"  style="width: 100%;" :selectParams="selectLeaseStatus"></EdSelect> 
                                        <!-- <el-input class="flex-input" disabled v-model="rentParkform.leaseStatus">出租中</el-input> -->
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6"><el-form-item></el-form-item></el-col>
                                <el-col :span="8">
                                    <el-form-item class="width-m25" label="所属项目" prop="villageName"   :rules="$validate.validates({required:true,msg:'不能为空'})">
                                        <el-input class="flex-input" disabled v-model="rentParkform.villageName" ></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row class="width-100">
                                <el-col :span="8">
                                    <el-form-item label="联系人:" prop="leaserName" :rules="$validate.validates({required:true,msg:'不能为空'})">
                                        <el-input class="flex-input" v-model="rentParkform.leaserName" ></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6"><el-form-item></el-form-item></el-col>
                                <el-col :span="8">
                                    <el-form-item label="联系电话:" prop="leaserPhone" :rules="$validate.validates({required:true,msg:'不能为空',type:'tel'})">
                                        <el-input class="flex-input" v-model="rentParkform.leaserPhone" ></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row class="width-100">
                                <el-col :span="8">
                                    <el-form-item label="车位编号:" prop="parkingSpacesNo" :rules="$validate.validates({required:true,msg:'不能为空'})">
                                       <el-input class="flex-input"  disabled v-model="rentParkform.parkingSpacesNo" ></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6"><el-form-item></el-form-item></el-col>
                                <el-col :span="8">
                                    <el-form-item label="租金" prop="rent" :rules="$validate.validates({required:true,msg:'不能为空'})">
                                        <el-input class="flex-input" placeholder="请输入" v-model="rentParkform.rent">
                                            <i slot="suffix" style="font-style:normal;margin-right: 10px;">元/月</i>
                                        </el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row class="width-100">
                                <el-col :span="12">
                                    <el-form-item label="车位所属" prop="parkingSpacesBelong" :rules="$validate.validates({required:true,msg:'不能为空'})">
                                        <template>
                                            <!-- <el-radio-group v-model="radio"> -->
                                                <el-radio disabled v-model="rentParkform.parkingSpacesBelong" label='1'>物业</el-radio>
                                                <el-radio disabled v-model="rentParkform.parkingSpacesBelong" label='2'>住户</el-radio>
                                            <!-- </el-radio-group> -->
                                        </template>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row class="width-100">
                                <el-col :span="24">
                                    <el-form-item label="图片" prop="pics">
                                        <el-upload
                                            accept=".jpg, .jpeg, .png, .gif"
                                            :action="action"
                                            :headers="headers"
                                            list-type="picture-card"
                                            :limit="5"
                                            :multiple="true"
                                            :file-list="fileList"
                                            :before-upload="beforeImgUpload"
                                            :on-preview="handleImgPreview"
                                            :on-success="handleImgSuccess"
                                            :on-remove="handleImgRemove">
                                            <i class="el-icon-plus"></i>
                                        </el-upload>
                                    <el-dialog :visible.sync="dialogVisible">
                                        <img width="100%" :src="dialogImageUrl" alt="">
                                    </el-dialog>
                                    <p class="labelFont">请上传2M以内的图片，建议上传图片大小430px*430px,格式为jpeg、jpg、png、gif的图片，至多5张</p>
                                </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row class="width-100">
                                <el-col :span="22">
                                    <el-form-item label="车位简介" prop="description" >
                                        <el-input type="textarea" placeholder="请补充车位信息及租赁要求..." v-model="rentParkform.description" :rows="6"  maxlength="200" show-word-limit></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row class="width-100">
                                <el-col :span="24">
                                    <el-form-item class="form_btns">
                                        <el-button class="ed-button ed_black-bottom" @click="onSubmit('formRef')" >确定</el-button>
                                        <el-button class="ed-button ed_white_bottom" @click="$utilsSet.goBack($router)">取消</el-button>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                        </div>
                        <div class="right">
                            <div class="right_title">进度跟踪</div>
                            <div>
                                <el-timeline :reverse="reverse">
                                    <el-timeline-item v-for="(activity, index) in activities" :key="index" color="#EED096" size="large">
                                        <div class="timeline_time">{{activity.scheduleTime}}</div>
                                        <div class="timeline_content">{{activity.status}}</div>
                                    </el-timeline-item>
                                </el-timeline>
                            </div>
                        </div>
                    </div>
                </EdCreateCard>
            </el-form>
        </div>
    </div>
</template>
<script>
    import EdTinymce from 'src/components/EdTinymce.vue'
    import EdCreateCard from 'src/components/EdCreateCard.vue'
    import EdDateTimeRange from 'src/components/EdDateTimeRange.vue'
    import EdSelect from 'src/components/EdSelect.vue'
    import { defineComponent } from 'vue'
    import {getToken} from 'src/utils/auth'
    import * as api from './api'  
    import EdDialog from 'src/components/EdDialog.vue';
    export default defineComponent({
        name: "companyCreate",
        components: { EdCreateCard, EdDateTimeRange, EdSelect, EdTinymce, EdDialog},
        data(){
            return{
                // 租赁信息
                rentParkform:{
                    id:'',
                    leaseStatus:'',
                    villageName:'',
                    villageId:'',
                    leaserName:'',
                    leaserPhone:'',
                    parkingSpacesNo:'',
                    rent:'',
                    parkingSpacesBelong:'',
                    pics:[],
                    description:'',
                },
                reverse: true,
                activities: [],
                pickerParams:{
                    valueFormat:"yyyy-MM-dd"
                },
                // 房屋简介-折叠
                activeNames: ['1'],
                collapse_text: '收起',
                collapse_icon: 'el-icon-arrow-up',
                action: '',
                headers:{
                    RdAuthorization: getToken()
                },
                dialogImageUrl: '',
                fileList: [],
                dialogVisible: false,
                dialogImageUrl: '',
                selectLeaseStatus:{
                    options:[{value: '1', label: '出租中'}],
                    disabled:true
                },
            }
        },
        activated(){
            this.action = this.$baseApi + "/file/upload";
            // 出租中
            if(this.$route.query.id && this.$route.query.parkingStatus==1){
                // 编辑 
                this.parkingRentInfo();
            }
        },
        deactivated(){
            this.rentParkform={}
            this.pics = []
        },
        methods:{
            parkingRentInfo(){
                api.parkingRentInfo({id:this.$route.query.id}).then(response => {
                    if(response.success == true) {
                        this.rentParkform = {...response.data}
                        this.rentParkform.parkingStatus= response.data.parkingStatus.toString(),
                        this.rentParkform.parkingSpacesBelong=response.data.parkingSpacesBelong.toString(),
                        this.rentParkform.pics=response.data.pics
                        this.activities = response.data.schedule
                        let fileList = []
                        response.data.pics.forEach(x => {
                            fileList.push({url:x})
                        })
                        this.fileList = fileList
                    }
                })
            },
            gotoUrl(url){
                window.open(url, "_blank");
            },
                // 图片 上传前
            beforeImgUpload(file){
                // console.log('before-->', file)
                const fileType = file.name.split('.');
                const fileDate = fileType.slice(-1);
                if (['jpeg', 'jpg', 'png', 'gif'].indexOf(fileDate[0]) < 0) {
                    this.$message.error('仅支持格式：.jpeg、.jpg、.png、.gif!');
                    return false
                }
                const isLt5M = file.size / 1024 /1024 < 2;
                if (!isLt5M) {
                    return this.$message.error('上传文件大小不能超过 2MB!');
                }
                // return isLt5M;
                return true;
            },
            // 图片 上传成功
            handleImgSuccess(response, file, fileList){
                let res = file.response;
                if(res&&res.success == true){
                    console.log('res',res);
                    this.rentParkform.pics.push(res['data'])
                    this.$refs['formRef'].validate()
                }
            },
            // 图片 删除
            handleImgRemove(file, fileList) {
                this.rentParkform.pics = fileList&&fileList.map(v=>{
                    return v['url']
                })
            },
            // 图片 预览
            handleImgPreview(file) {
                console.log('file',file);
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            },
            onSubmit(formRef){
                this.$refs['formRef'].validate((valid)=>{
                    if(!valid){
                        return
                    }
                    this.rentParkform.id = this.$route.query.id
                    // console.log('rentParkform',rentParkform);
                    api.parkingRentUpdate(this.rentParkform).then(res=>{
                        // console.log('this',this.rentParkform); return
                        if(res.success){
                            this.$message.success({
                                message: '编辑成功',
                                center: true,
                                duration: 2000,
                            })
                        }
                        this.$router.back()
                        this.$utilsSet.goBack(this.$router);
                        this.$refs['formRef'].resetFields()
                    })
                })
            }
        },
    })
</script>

<style scoped lang="scss">
   :deep .zh_flex{
        padding: 16px !important;
        font-family: 'Noto Sans SC';
        font-style: normal;
        font-weight: 400;
        font-size: 14px;
        line-height: 28px;
        .left{
            flex: 2;
            border-right: 1px solid #e5e7eb;
            // border: 1px solid #e5e7eb;
            padding: 0 40px 5px 20px;
        }
        .right{
            flex: 1;
            padding: 5px 20px;
        }
    }
</style>